html {
    font-size: 12px;
    font-family: 'Tahoma';
}

body {
    color: #000;
}

a {
    text-decoration: none;
    color: #000;
}

h1,
h2,
h3,
h4,
h5,
p,
ul,
ol,
figure {
    margin: 0;
    padding: 0;
}

li {
    list-style-type: none;
}

img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
}

header,
nav,
main,
footer {
    width: 100%;
}

/*定义定宽盒子的宽度*/
.w1000 {
    width: 1000px;
    margin: 0 auto;
}

/*1.页面顶部*/
header {
    color: #000;
    width: 100%;
    display: block;
}

/*2.页面顶部logo*/
header .logo {
    width: 100%;
    height: 160px;
    background-color: #bc1a05;
    background-position: center center;
}

header .logophoto {
    width: 1000px;
    height: 160px;
    margin: 0 auto;
    padding: 20px 0;
}

header .logo img {
    width: 1000px;
    height: 120px;
}

/*导航栏样式  */
.nav {
    background-color: #801407;
    width: 100%;
    margin: 0px 0px 20px;
}

/* 导航栏主菜单横向布局 */
.nav>ul {
    width: 1000px;
    display: flex;
    /* 使用flex布局实现横向排列 */
    justify-content: space-around;
    margin: 0 auto;
}

.nav li {
    flex: none;
}

.nav a {
    display: block;
    height: 42px;
    line-height: 42px;
    text-align: center;
    color: #fff;
    font-size: 17px;
    text-shadow: 1px 1px 1px black;
    padding: 0 10px;
    padding-right: 5px;
}

.nav li:hover>a {
    background-color: #b20d0d;
}

/*2.2 二级导航菜单*/
.nav ul.sub-menu {
    display: none;
    position: absolute;
    top: 42px;
    left: 0;
    width: 100%;
    background-color: #801407;
    min-width: 14rem;
    z-index: 2;
}

/*鼠标放到一级菜单上展开二级菜单*/
.nav li:hover>ul.sub-menu {
    display: block;
}

.nav ul.sub-menu a {
    display: block;
    padding: 0px 10px;
    text-align: center;
    white-space: nowrap;
    /* 防止文字换行 */
    border-bottom: 1px dashed #ff5151;
    /* 添加分隔虚线*/
    background-color: #b20d0d;
    font-size: 17px;
}

.nav ul.sub-menu a:hover {
    background-color: #801407;
    color: #f2bb49;
}

/* 确保一级菜单项有相对定位，作为二级菜单的定位基准 */
.nav>ul>li {
    position: relative;
}

/*三级菜单项样式*/
.nav ul.sub-menu ul.sub-menu2 {
    display: none;
    position: absolute;
    left: 100%;
    top: 0px;
    text-align: center;
    white-space: nowrap;
    border-bottom: 1px dashed #ff5151;
    /* 添加分隔虚线*/
    background-color: #b20d0d;
    font-size: 17px;
    z-index: 2;
}

.nav ul.sub-menu ul.sub-menu2 a:hover {
    background-color: #801407;
    color: #f2bb49;
}

/*为二级菜单项添加相对定位，作为三级菜单的基准*/
.nav ul.sub-menu li {
    position: relative;
}

/*三级菜单的展开*/
.nav ul.sub-menu li:hover>ul.sub-menu2 {
    display: block;
}


/* 当鼠标在三级菜单上时，对应的二级菜单项保持hover状态 */
.nav ul.sub-menu li:hover>a {
    background-color: #801407;
    color: #f2bb49;
}

/* 3.轮播图 */
.carousel-container {
    width: 100%;
    height: 321.2px;
    overflow: hidden;
    position: relative;
    z-index: 1;
}

.carousel-slides {
    width: 500%;
    height: 100%;
    display: flex;
    animation: slide 27s infinite;
}

.slide {
    width: 20%;
    height: 100%;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
}

.slide img {
    width: 1000px;
    height: 321.2px;
    object-fit: fill;
}

@keyframes slide {

    0%,
    19% {
        transform: translateX(0);
    }

    /* 第一张：0-2秒 */
    21%,
    41% {
        transform: translateX(-20%);
    }

    /* 第二张：2.5-4.5秒 */
    43%,
    63% {
        transform: translateX(-40%);
    }

    /* 第三张：5-7秒 */
    65%,
    85% {
        transform: translateX(-60%);
    }

    /* 第四张：7.5-9.5秒 */
    86%,
    99% {
        transform: translateX(-80%);
    }

    99.5%,
    100% {
        transform: translateX(0);
    }

    /* 第五张：10秒 */
}

/* 通知公告/院内新闻容器样式 */
.news-notice-container {
    display: flex;
    margin: 20px auto;
}

.news-notice-item{
    margin: 0 0 10px;
    padding: 0 20px 10px 0;
}

.news-notice-item:first-child{
    border-right: 1px dashed #999;
    padding-right: 30px;
    margin-right: 10px;
    width: 42%;
}

.news-notice-item:last-child{
    padding-left: 20px;
    width: 56%;
}
/* 模块头部*/
.item-header {
    display: flex;
    align-items: center;
    margin: 0 0 20px;
    padding: 0 15px;
    border-bottom: 2px solid #9a0000;
    font: 20px/1.5 Tahoma;
}

.item-header h3 {
    font-size: 20px;
    color: #000;
    font-weight: bold;
}

.item-header .more {
    font-size: 14px;
    color: #000;
    /*放在最右边*/
    margin-left: auto;
}

.item-header .more:hover {
    color: #f2bb49;
    /* 沿用导航栏hover配色 */
    text-decoration: underline;
}

/* 列表样式 */
.item-list {
    width: 100%;
}

.item-list li {
    display: flex;
    align-items: baseline;
    margin: auto;
    line-height: 40px;
    justify-content: space-between;
    border-bottom: 1px dashed #999;
    list-style: none; /* 清除默认列表样式 */
    position: relative; /* 为伪元素定位做准备 */
    padding-left: 20px; /* 给箭头留出空间 */
}

.item-list li::before {
    content: url("https://mksxy.jci.edu.cn/dfiles/12689/templates/default/img/li_jiant.png"); 
    position: absolute;
    left: 0; /* 定位到左侧 */
    top: 3px; /* 垂直居中*/
    font-size: 14px; /* 箭头大小 */
}

/* 日期样式 */
.item-list .date {
    font-size: 14px;
    color: #000;
    margin-right: 10px;
}

/* 标题样式 */
.item-list li a {
    font-size: 14px;
    color: #000;
    flex: 1;
    display: flex;
    overflow: hidden;
    width: 75%;
    /*加粗*/
    font-weight: bold;
}

.item-list li a:hover {
    color: #f2bb49;
    /* 沿用导航栏hover配色 */
}

/*图文混排轮播图*/
/* 图片聚焦标题 */
.photo-focus-header{
    margin-bottom: 25px;
}

.image-carousel-container {
    margin: 0 0 50px;
    position: relative;
    overflow: hidden;

}

/* 轮播图容器 */
.image-carousel {
    width: 100%;
    height: 180px;
    overflow: hidden;
    position: relative;
}

/* 图片轨道 */
.image-track {
    display: flex;
    width: max-content;
    animation: stepScroll 25s linear infinite;
    padding: 0;
    margin: 0;
    list-style: none;
}

.image-track li {
    padding-left: 10px;
}

/* 每个图片项 */
.image-track li img{
    width: 184.4px;
    height: 134.4px;
    padding: 2px;
    border: 1px solid #000;
    border-radius: 0;
    flex-shrink: 0;
    text-align: center;
    margin-bottom: 10px;
}

.image-track a {
    display: block;
    text-decoration: none;
    color: #000;
    text-align: center;
}

.image-track p {
    font-size: 12px;
    line-height: 1.4;
    height: 34px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    line-clamp: 2;
}

/* 步进式滚动动画 */
@keyframes stepScroll {
    /* 初始状态：显示前5张图片 */
    0%, 16% {
        transform: translateX(0);
    }
    /* 滚动到第6张图片 */
    17%, 32% {
        transform: translateX(-200px); /* 滚动一张图片的距离 */
    }
    /* 滚动到第7张图片 */
    33%, 48% {
        transform: translateX(-400px);
    }
    /* 滚动到第8张图片 */
    49%, 64% {
        transform: translateX(-600px);
    }
    /* 滚动到第9张图片 */
    65%, 80% {
        transform: translateX(-800px);
    }
    /* 滚动到第10张图片 */
    81%, 96% {
        transform: translateX(-1000px);
    }
    /* 返回起点 */
    97%, 100% {
        transform: translateX(0);
    }
}

/*尾部*/
footer {
    background-color: #801407;
    color: #fff;
    font-size: 14px;
    text-align: center;
    padding: 20px 0 40px;
}

footer p {
    line-height: 200%;
}
